[Snyk] Upgrade @nuxt/ui from 2.22.0 to 3.1.3 #167
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Snyk has created this PR to upgrade @nuxt/ui from 2.22.0 to 3.1.3. See this package in npm: @nuxt/ui See this project in Snyk: https://app.snyk.io/org/nerds-github/project/8b4160ff-3510-4d06-a27b-7930a5e75719?utm_source=github&utm_medium=referral&page=upgrade-pr
Reviewer's GuideThis PR performs a major version upgrade of the @nuxt/ui dependency in package.json from the 2.x line to 3.1.3, applying a simple version bump to adopt security fixes, breaking‐change removals, and new features from the upstream release. Class diagram for OverlayProvider breaking change in @nuxt/ui 3.xclassDiagram
class OverlayProvider {
+open(options): OverlayInstance
}
class OverlayInstance {
+result: Promise<any>
}
OverlayProvider --|> OverlayInstance : open() returns
Class diagram for new CheckboxGroup and RadioGroup components in @nuxt/ui 3.xclassDiagram
class CheckboxGroup {
+items: CheckboxGroupItem[]
+value: CheckboxGroupValue[]
+v-model
}
class RadioGroup {
+items: RadioGroupItem[]
+value: RadioGroupValue
+variant: string
+v-model
}
CheckboxGroup o-- CheckboxGroupItem
RadioGroup o-- RadioGroupItem
Class diagram for utility class changes in @nuxt/ui 3.xclassDiagram
class UtilityClasses {
+text-primary
+bg-error
+text-muted
+border-default
+bg-elevated/50
+rounded-sm
+rounded-md
+rounded-lg
}
class ThemeVariables {
+--ui-primary
+--ui-error
+--ui-text-muted
+--ui-border
+--ui-bg-elevated
+--ui-radius
}
UtilityClasses ..> ThemeVariables : maps to
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Snyk has created this PR to upgrade @nuxt/ui from 2.22.0 to 3.1.3.
ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.
The recommended version is 25 versions ahead of your current version.
The recommended version was released 25 days ago.
Issues fixed by the recommended upgrade:
SNYK-JS-INFLIGHT-6095116
Release notes
Package name: @nuxt/ui
🚨 Breaking Changes
collapsiblefieldIn previous patch, we introduced a new
collapsiblefield initemsto display children incollapsedstate as well as making the parent element respect its link attributes. However, it didn't feel right so we removed it in favor of 1e2a10b, 9cf9f25 and f2682fd.type: 'trigger'.collapsed, you can use thepopover/tooltipprops or item fields:🚀 Features
after:enterevent (#4187) (d9e9fea)tooltipandpopoverprops (f2682fd), closes #4186triggertype in items (9cf9f25)verticalorientation with Accordion instead of Collapsible (1e2a10b), closes #4072 #3911anchorslot (#4119) (473513c)🐛 Bug Fixes
tableborders in RTL mode (#4192) (43d281f)presentationrole to viewport (2ba94db)loadingicon (#4163) (fe4e1f8)tooltipwhen collapsed (44f536f)collapsiblefield (3c78e2f)old-neutralcolor as static (#4193) (dae9f0b)🌐 Locales
👋 New Contributors
Full Changelog: v3.1.2...v3.1.3
🚀 Features
squareprop (#4008) (894e8a6)tablevariant (#3997) (1b6ab27)uifield in items (#4060) (b9adc83)increment-disabled/decrement-disabledprops (#4141) (c7fba2e)collapsiblefield in items (2be60cd), closes #3353 #3911tooltipin items (46c2987), closes #4050tooltiparound thumbs (d140acc), closes #1469progressprop to hide progress bar (#4125) (92632e9)🐛 Bug Fixes
z-indexon focused element (204953b)neutralcolor (7d51a9e), closes #4084 #3629variant(f2fd778), closes #3998UCheckboximport (7551a85), closes #4090classshould have priority overuiprop (e6e510b)divforerrorandhelpslots (459a041)useAppConfigreactive (12303a8)@ nuxt/fontswith default weights (276268d)valuefield (#4105) (09b4699)divtag fortitle&description(a57844e), closes #4096focus:outline-nonewithlinkvariant (999a0f8)baseslot override (c63d2f3)useAppConfigreactive (869c070), closes #3952🌐 Locales
👋 New Contributors
Full Changelog: v3.1.1...v3.1.2
🚀 Features
closeAllmethod (#3984) (ac4c194)isOpenmethod to check overlay state (#4041) (a4f3f6d)🐛 Bug Fixes
place-items-centerto grid row (#4034) (8dfdd63)metatoctrlconvert on non macos platforms (f3b8b17), closes #3869 #3318nuxt-nightly(#3996) (bc0a296)sm:w-autofrom content slot (aebf0b3), closes #3987valuefield type (#3995) (195773e)border-bg/divide-bgutilities (82b5f32)ring-offset-*utilities (#3992) (e5df026)uiobject (591d59f), closes #3579@ theme inlineto properly reference css variables (6131871), closes #4018👋 New Contributors
Full Changelog: v3.1.0...v3.1.1
✨ Highlights
🎨 Improved Utility Classes
We've enhanced the utility class system to make it more intuitive and easier to use. While CSS variables provided flexibility, writing classes like
text-(--ui-text-muted)proved cumbersome. We've introduced three major improvements:+ <div class="text-primary">
- <div class="bg-(--ui-error)">
+ <div class="bg-error">
+ <div class="text-muted">
- <div class="border-(--ui-border)">
+ <div class="border-default">
- <div class="bg-(--ui-bg-elevated)/50">
+ <div class="bg-elevated/50">
rounded-*utilities to use our--ui-radiusCSS variable, making it easier to maintain consistent border radius across your application: https://ui.nuxt.com/getting-started/theme#radius+ <div class="rounded-sm">
- <div class="rounded-[calc(var(--ui-radius)*1.5)]">
+ <div class="rounded-md">
- <div class="rounded-[calc(var(--ui-radius)*2)]">
+ <div class="rounded-lg">
🧩 New Components and Features
import type { CheckboxGroupItem, CheckboxGroupValue } from '@ nuxt/ui'
const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
const value = ref<CheckboxGroupValue[]>(['System'])
</script>
<template>
<UCheckboxGroup v-model="value" :items="items" />
</template>
cardandtablevariants for more flexible layouts: https://ui.nuxt.com/components/radio-group#variantimport type { RadioGroupItem, RadioGroupValue } from '@ nuxt/ui'
const items = ref<RadioGroupItem[]>(['System', 'Light', 'Dark'])
const value = ref<RadioGroupValue>('System')
</script>
<template>
<URadioGroup v-model="value" variant="table" :items="items" />
</template>
🌉 Inertia.js Integration
The Vue version now includes built-in support for Inertia.js. Enable it with the
inertia: trueoption in yourvite.config.ts:import vue from '@ vitejs/plugin-vue'
import ui from '@ nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
inertia: true
})
]
})
This automatically replaces
RouterLinkwithInertiaLinkin all components, providing seamless integration with your Inertia.js applications: https://ui.nuxt.com/getting-started/installation/vue#inertia⚡ Module Builder Update
The module has been updated to use nuxt/[email protected], bringing improved build performance and better TypeScript support.
Following this change, we've refactored how component types are handled which brings full HMR support with
app.config.tschanges, this was only working when reloading the page previously.🚨 Breaking Changes
.open()(#3829) (f3098df)This PR changes
.open()to return an overlay instance with aresultpromise property instead of returning the promise directly, providing more flexibility:+ const instance = modal.open({ count: count.value })
+ const result = await instance.result
</script>
🚀 Features
portalprop (#3688) (29fa462)selectevent (#3678) (22edfd7)content-topandcontent-bottomslots (#3886) (1a46394)attachprop to opt-out of nested form attachement (#3939) (1a0d7a3)resetSearchTermOnSelect(cea881a), closes #3782stepSnapping&disableWheelChangeprops (#3731) (f5e6284)close:preventevent (#3958) (f486423)rounded-*utilities (#3906) (f9737c8).open()(#3829) (f3098df)autofocus/autofocus-delayprops (0456670), closes #3717cardandtablevariants (#3178) (4d138ad)onSelectfield in items (8640831)trandtd(#3866) (80dfa88)list-leadingandlist-trailingslots (#3837) (3447a06)autoresize-delayprop (06414d3), closes #3730icon,loading, etc. props to match Input (cb193f1)resize-noneclass withautoresizeprop (ffafd81)🐛 Bug Fixes
divinstead ofh3for header tag (75e4792), closes #3963@ nuxt/module-builderupgrade (#3855) (39c861a)transform-originin popper content (#3919) (01d8dc7)any(#3741) (97274f1)onSelectevents (#3735) (f25fed5)disableditems to be selected (8435a0f), closes #3474valueKeystring case (9ca213b), closes #3949 #3331value(#3779) (52a97e2)changeon multiple item removal (9d2fed1), closes #3756downloadproperty (#3879) (47cdc2e)sm:w-autocontent slot (abe0859), closes #3788iconandcontentslots (1d45980), closes #3785datareactivity (#3967) (6e27304)colspantoth(#3926) (122e8ac)